
import React           			from 'react';
import { Link } 				from 'react-router-dom';
import {inject, observer }      from 'mobx-react'
import PropTypes 				from "prop-types";

import Search 				    from 'component/search/index.jsx';

import './index.css';

@inject('store')
@observer
class Top extends React.Component{
	// context中的路由参数
	static contextTypes = {
    	router: PropTypes.object
  	}
 	
	// 构造函数
	constructor(props){
		super(props);
	}
	// 监听输入框变化
	onInputChange(e){
		this.inputValue = e.target.value
	}
	// 输入框回车
	onInputKeyUp(e){
		if(e.keyCode === 13){
			this.context.router.history.push("add?id=" + this.props.store.id);
			this.addThing();
		}
	}
	// 添加计划
	addThing(){
		let data = this.inputValue;
		if(!! data){
			this.props.store.addTodo(data);
			console.log("storeA:",this.props.store.unFinishedList);
		}
	}
	// 清理缓存
	clearAllThing(){
		this.props.store.clear();
	}
	
	render(){
		const style = {textAlign:'center'};
		return(
				<div>
					<div className="Top">
						<input type="text" className="form-control input-thing" 
						 		placeholder="请输入计划" 
						 		onChange={(e) => {this.onInputChange(e)}}
						 		onKeyUp={(e) => {this.onInputKeyUp(e)}}
						 		autoFocus=""/>
						<Link to={"add?id=" + this.props.store.id}>
							<button className="btn btn-primary btn-add" 
									onClick={() => {this.addThing()}}>
									Add
							</button>
						</Link>
					</div>
					<div className="clearStorage">
						<Link to={"clear"}>
							<button className="btn btn-danger btn-clear" 
									onClick={() => {this.clearAllThing()}}>
									Clear
							</button>
						</Link>
					</div>
				</div>

		);
	}
}

export default Top;
